<template>
    <div id="product">
        <el-row  type="flex" :gutter="20" justify="start">
            <el-col :span="1" ></el-col>
            <el-col :span="16" >
                <el-card :body-style="[{ padding: '0px',margin:'20px'}]">
                    <el-container>
                        <el-aside width="200px">
                            <img :src="obj.image" fit='contain' class="image">
                            <img style="width: 100px; height: 100px;margin-top: 5px;border: 2px red solid" :src="obj.image" fit='scale-down' class="image">
                        </el-aside>
                            <el-container>
                                <el-header style='background-color: white;color: black;'>
                                    {{obj.productName}}
                                    <el-tag style="margin-right:5px" effect="dark" type="danger"><span>{{obj.status=='SELL'?'正在拍卖':obj.status=='SELL_OUT'?'已拍卖':obj.status=='DOWN'?'下架':'流拍'}}</span></el-tag>
                                    <el-button type="danger" style='margin-left: 40px' icon="el-icon-star-off" circle></el-button>
                                    <el-tag style='float: right;' class="el-icon-user-solid" type="info">围观次数：<span>{{obj.hot}}</span></el-tag>
                                </el-header>
                                <el-main>
                                    <span style='font-size:2em'>当前价格：{{record==''?obj.basePrice+obj.bond:record.slice(-1)[0].money+obj.bond}}</span><br/>
                                    <el-tag type="danger" effect='light'> 需缴纳保证金：<span>{{obj.bond}}</span></el-tag><br/>
                                <el-tag type="danger"  v-if="obj.status=='SELL'?true:false"> 剩余：<time class="time" >{{ time }}</time></el-tag><br/>
                                <el-tag type="danger" effect='dark' size="medium">结束时间：{{obj.deadline}}</el-tag>
                                </el-main>
                                <el-footer>
                                    <el-row>
                                        <el-tag style="margin-right:15px;width:180px"> 我要出价：<el-input v-model="moneys" size='mini' style="width:100px" :placeholder="(record==''?obj.basePrice+obj.bond:record.slice(-1)[0].money+obj.bond)+10" :min="(record==''?obj.basePrice+obj.bond:record.slice(-1)[0].money+obj.bond)+10"></el-input></el-tag>
                                        <el-button type="danger" @click='dopai' v-if="obj.mode=='秒杀'?true:false" :disabled="obj.mode=='秒杀'?obj.status=='SELL'?false:true:true">竞拍</el-button>
                                        <el-button style='margin-left: 40px'>在线融资申请</el-button>
                                    </el-row>
                                </el-footer>
                            </el-container>
                    </el-container>   
                </el-card>
                <br>
                <el-card :body-style="[{ padding: '0px'}]">
                  <vue-seamless-scroll :data="record" class="seamless-warp" :class-option="classOption">
                  <el-table
                      :data="record" class="DataList_top"
                      style="width: 100%"
                      :row-class-name="tableRowClassName" >
                        <el-table-column class="DataList_left"
                              prop="pid"
                              label="编号"
                              width="180">
                        </el-table-column>
                        <el-table-column class="DataList_left"
                            prop="nikeName"
                            label="出价者"
                            width="180">
                        </el-table-column>
                        <el-table-column class="DataList_left"
                            prop="money"
                            label="出价"
                            width="180">
                        </el-table-column>
                        <el-table-column class="DataList_left"
                            prop="time"
                            label="出价时间">
                        </el-table-column>
                  </el-table>
                   </vue-seamless-scroll> 
                </el-card>
            </el-col>
            <el-col :span="1" ></el-col>
            <el-col :span="6" >
                <el-card :body-style="[{ padding: '0px',margin:'20px'}]">
                    <div slot="header" class="clearfix">
                        <span>相关文章</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="art in articls" :key="art.id" class="text item">
                        {{art.title}}
                    </div>
                </el-card>
            </el-col>
            
        </el-row>
    </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
    name: 'this_pai',
    components:{
      vueSeamlessScroll
    },
    data() {
        return {
          time : '',
          endTime:'',
          flag : false,
          obj:'',
          parameter:'',
          tableData: [],
          record:[],
          articls:'',
          out:false,
          moneys:'',
          
        }
    },
     computed: {
      classOption () {
        return {
          step: 0.3, // 数值越大速度滚动越快
          limitMoveNum: this.record.length, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }},
    created(){  //生命周期里接收参数
        if(this.$route.query.obj=={}){
            this.obj = this.$cookies.get('product');
            this.obj = this.$cookies.get('record');
        }else{
            this.obj = this.$route.query.obj;
            this.record = this.$route.query.record;
        }
        //接受参数关键代码
        this.$cookies.set('product',this.obj,{expires:60000,path:''});   //return this
        this.getrecord();
         //获取相关文章
        this.$ax.get('/epai/artical/getartical',{params:{
            cid:this.obj.cid
        }}).then((response)=>{
                if (response.status == 200 && response.data.success) {
                let a =  response.data.data;
                this.articls = a;
            }
        }).catch(error => {
            console.error(error);
        });
    },
    mounted(){
        let time = setInterval(()=>{
            if(this.flag == true){
                clearInterval(time)
            }
            this.timeDown(this.obj.deadline)
        },1000);
        let timer = setInterval(()=>{
            if(this.out == true){
                clearInterval(timer)
            }
            this.getrecord()
        },5000)
    },
    destroyed(){
      this.out = true;
    },
    methods:{
      timeDown (times) {
        const endTime = new Date(times)
        const nowTime = new Date();
        let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
        let d = parseInt(leftTime/(24*60*60))
        let h = this.formate(parseInt(leftTime/(60*60)%24))
        let m = this.formate(parseInt(leftTime/60%60))
        let s = this.formate(parseInt(leftTime%60))
        if(leftTime <= 0){
          this.flag = true;
          this.time = `已结束`;
          return;
        }
        this.time = `${d}天${h}小时${m}分${s}秒`;
      },
      formate (time) {
        if(time>=10){
          return time
        }else{
          return `0${time}`
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (row.isVIP === 1) {
          return 'warning-row';
        }
        return '';
      },
      getrecord(){
        //获取竞价记录
         this.$ax.get('/epai/auction-record/getrecord',{params:{
                pid:this.obj.id
            }}).then((response)=>{
                 if (response.status == 200 && response.data.success) {
                    let a =  response.data.data;
                    this.record = a;
                }
            }).catch(error => {
                console.error(error);
            });
      },
      dopai(){
        this.obj.money = this.moneys;
        this.obj.uid = sessionStorage.getItem("uid");
        this.obj.notifyUrl =  window.location.href ;
        this.getrecord();
        if(this.moneys>=((this.record==''?this.obj.basePrice+this.obj.bond:this.record.slice(-1)[0].money+this.obj.bond)+10)){
          //竞价
          this.$ax.post("/epai/auction-record/addrecord",this.obj).then((resp) => {
            // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
            // const divForm = document.getElementsByTagName("div");
            // if (divForm.length) {
            //   document.body.removeChild(divForm[0]);
            // }
            if(resp.data.success){
              this.$message({
                showClose: true,
                message: '竞价成功',
                type: 'sucesses'
              });
            }else{
              this.$message({
                showClose: true,
                message: resp.data.message,
                type: 'warning'
              });
            }        
          });
        }else{
          this.$message({
            showClose: true,
            message: '出价不能低于'+((this.record==''?this.obj.basePrice+this.obj.bond:this.record.slice(-1)[0].money+this.obj.bond)+10),
            type: 'error'
          });
        }
        
      }
    },
}
</script>

<style>
.seamless-warp{
  width: 100%;
  height: calc(100% - 16px);
  overflow: hidden;
}
</style>

<style>
  .el-table .warning-row {
    background: oldlace;
    
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<style>

  .el-header, .el-footer {
    background-color: white;
    color: white;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    margin-left: 40px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>